<template>
  <div>
    <a-descriptions bordered size='small' :column='2'>
      <a-descriptions-item label='单号'>
        {{ formItem.paymentNo }}
      </a-descriptions-item>
      <a-descriptions-item label='收款金额'>
        {{ formItem.amount }}
      </a-descriptions-item>
      <a-descriptions-item label='收款日期'>
        {{ formItem.amountDate }}
      </a-descriptions-item>
      <a-descriptions-item label='部门'>
        {{ formItem.deptName }}
      </a-descriptions-item>
      <a-descriptions-item label='业务员' :span="2">
        {{ formItem.deptSaleManName }}
      </a-descriptions-item>
      <a-descriptions-item label="附件" :span="2">
        <f-images :value="formItem.paymentImage"></f-images>
      </a-descriptions-item>
    </a-descriptions>

      <a-divider orientation="left">保证金收款明细</a-divider>
      <f-table ref="table" rowKey="orderDetailsId" :rowSelection='rowSelection' :columns="columns"   :scroll="{x:true}" :multiple="true" handler="customBondOrderListHandler" :operator="operator" :showMultipleBtn='false' :showPagination='false' :autoLoad="false" :params="queryParam" :api="api.bod.list" >
        <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
          <template>
            <a @click="$refs.orderInfoDrawer.showDrawer(record)" >查看</a>
          </template>
        </span>
      </f-table>
    <order-info-drawer ref='orderInfoDrawer'></order-info-drawer>

    <a-modal title='申请退保证金' v-model='returnModal' v-if='returnModal' width='800px' height='400px' @cancel='handleCancel' @ok='handleSubmit'>

      <f-form ref="returnForm" :action="api.payment" v-if='returnModal' handlerName="cbReturnPaymentSaveHandler" :form-key="this.customBondForm.paymentId">
        <f-form-item label="退款金额"  name="amount"  :value="customBondForm.amount" :max="customBondForm.amount" :required="true" :disabled="true"/>
        <f-form-item label="收款人" ref="saleMan" name="saleManId" type="select" :data="api.saleman.list" valueKey="saleManId" :value="customBondForm.saleManId" :required="true" label-key="saleManName" @change="saleManChange" :params="queryParam"/>
        <f-form-item label="收款账户" ref="bank" type="select" name="bankId" :value="customBondForm.bankId" :data="api.salemanBank.list" valueKey="bankId" label-key="bankName,bankNo" :required="true" :params="queryParam" :auto-load="false"/>
        <f-form-item label="退款日期" type="date" name="amountDate" :required="true" :value="customBondForm.amountDate"/>
        <f-form-item label="备注" name="remark" :value="customBondForm.remark"/>
      </f-form>
    </a-modal>
  </div>
</template>
<script>

  import api from './../js/api'
  import OrderInfoDrawer from '@/views/module/business/order/order_info_drawer'

  export default {
    name: 'CustomBondDetails',
    components: { OrderInfoDrawer },
    data() {
      let me = this
      //操作按钮
      let operator = []
      let companyId = this.$store.getters.companyId
      operator.push({
        name: "退款",
        icon: "transaction",
        that: this,
        handler: function(table, that) {
          let selectIds = table.selectedRowKeys
          if (selectIds.length > 0) {
            let amount = table.getSelectedTotal("customBond")
            me.customBondForm.amount =amount
            me.customBondForm.selectIds =selectIds.join(",")
            me.returnModal = true
          } else {
            that.$message.error("请选择退款明细")
          }
        }
      })
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        invoiceDetailsModal: false,
        customBond: 0,
        selectIds: '',
        modalTitle: '开票申请确认',
        returnModal: false,
        params1: {
          formulaType: 5
        },
        params2: {
          bankType: 1
        },
        orderInfo:{},
        formItem: this.getFormItem(),
        customBondForm:{
          amount:0,
          bzjId:null,
          deptId:null,
          remark:'',
          selectIds:null
        },
        // 表头
        columns: [

          {
            title: '单号',
            align: 'center',
            dataIndex: 'orderNo',
            scopedSlots: { customRender: 'name' },
          },
          {
            title: '发货日期',
            align: 'center',
            dataIndex: 'sendDate'
          },
          {
            title: '购货方',
            align: 'center',
            dataIndex: 'customName'
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'drugsName'
          },
          {
            title: '规格',
            align: 'center',
            dataIndex: 'drugsSpec'
          },
          {
            title: '数量',
            align: 'center',
            dataIndex: 'saleNum'
          },
          {
            title: '单价',
            align: 'center',
            dataIndex: 'salePrice'
          },
          {
            title: '发货金额',
            align: 'center',
            isStatistics: true,
            dataIndex: 'saleAmount'
          },
          {
            title: '保证金金额',
            align: 'center',
            isStatistics: true,
            dataIndex: 'customBond'
          },
          {
            title: '多收金额',
            align: 'center',
            isStatistics: true,
            dataIndex: 'customOverBond'
          },
          {
            title: '操作',
            align: 'center',
            width: '80px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    computed: {
      rowSelection() {
        return {
          getCheckboxProps: record => ({
            props: {
              disabled:record.tbzjId!='', // Column configuration not to be checked
              name:record.tbzjId
            },
          }),
        };
      },
    },
    methods: {
      getFormItem() {
        return {
          invoiceId: '',
          companyId: '',
          supplierId: '',
          deptName: '',
          deptSaleManName: '',
          saleManName: '',
          amountFormulaId: null,
          invoiceUnitId: null,
          taxAmount: '',
          invoiceAmount: '',
          invoiceDate: '',
          bankId: null,
          invoiceType: null,
          userId: '',
          invoiceState: '',
          remark: ''
        }
      },
      handleCancel() {
        this.returnModal= false
      },
      handleSubmit() {
        this.$refs["returnForm"].submit(this.customBondForm, this.handleCancel)
      },
      //业务员切换
      saleManChange(value) {
        this.$refs.returnForm.getForm().resetFields(['bankId'])
        this.$refs['bank'].initData({ saleManId: value })
      },
      setData(data) {
        this.formItem = this.getFormItem()
        if (data && data.paymentId) {
          let params = {
            paymentId: data.paymentId,
            handlerName: 'customBondPaymentGetHandler'
          }
          this.queryParam.paymentId = data.paymentId
          this.queryParam.bzjId = data.paymentId
          this.queryParam.deptId = data.deptId
          this.customBondForm.deptId = data.deptId
          this.customBondForm.bzjId = data.paymentId
          this.http.get(this, {
            url: this.api.payment.get,
            params: params,
            success: function(me, data) {
              me.formItem = data
              me.loaded = true
            }
          })
          this.$refs['table'].refresh(false)
        }
      }
    }
  }
</script>
